import { FC, useState, useEffect } from "react"
import styles from "./ConsultHistoryItem.less"
import { FileTextOutlined } from "@ant-design/icons"
import { IConsultHistory, IAnnex } from "@/services/consultationDetail"
import { Image } from "antd"


const openFile = (fileUrl: string | null) => {
  (fileUrl) && (window.open(fileUrl))
}

interface ConsultHistoryItemProp {
  consultHistoryItem?: IConsultHistory
}

/**
 * 检查文件列表
 * @param props 
 * @returns 
 */
const consultHistoryItem: FC<ConsultHistoryItemProp> = ({ consultHistoryItem }) => {

  const [fileImgs, setFileImgs] = useState<Array<IAnnex>>([])// 图片文件列表
  const [fileOthers, setFileOthers] = useState<Array<IAnnex>>([])// 其他文件列表

  // 初始化fileHistory
  const initfileHistory = () => {
    if (consultHistoryItem?.annexList && consultHistoryItem.annexList.length > 0) {
      let newfileImgs: Array<IAnnex> = []
      let newfileOthers: Array<IAnnex> = []
      consultHistoryItem.annexList.forEach((item: IAnnex) => {
        // 判断是否为图片类型文件
        if (item.suffix === "jpge" || item.suffix === "jpg" || item.suffix === "png") {
          newfileImgs.push(item)
        } else {
          newfileOthers.push(item)
        }
      })
      setFileImgs(newfileImgs)
      setFileOthers(newfileOthers)
    }
  }
  useEffect(() => {
    initfileHistory()
  }, [consultHistoryItem])
  return (
    <div className={styles.consultHistoryListBox}>
      {
        fileOthers.map((item: IAnnex, index: number) => {
          return (
            <div key={index} className={styles.inspectionBox} onClick={() => { openFile(item.fileUrl) }}>
              <div className={styles.inspectionTag}>文件类型：{item.tagRes}</div>
              <FileTextOutlined className={styles.fileText} />
              <div className={styles.inspectionRight}>
                <div>
                  <span className={styles.inspectionP1}>{item.fileName}</span>
                  <span className={styles.inspectionP2}>{item.fileSize}</span>
                </div>
                <div className={styles.inspectionP3}>
                  上传时间：{item.uploadTime}
                </div>
              </div>
            </div>
          )
        })
      }
      {/* 图片文件 */}
      <div className={styles.itemImgList}>
        {
          fileImgs.map((item: IAnnex, index: number) => {
            return (
              <div className={styles.itemImgBox} key={index}>
                <div className={styles.itemImgP1}>{item.fileName}</div>
                <div className={styles.itemImg} >
                  <Image
                    className={styles.itemImgICon}
                    src={item.fileUrl ? item.fileUrl : ""}
                    fallback=""
                  />
                </div>
                <div className={styles.imgTag}>文件类型：{item.tagRes}</div>
              </div>

            )
          })
        }
      </div>


    </div>
  )
}

export default consultHistoryItem